<template>
  <div>
    <!-- 主标题和描述 -->
    <section class="text-center mb-12">
      <h1 class="text-5xl font-bold text-gray-800 mb-4">
        Markdown 工具箱
      </h1>
      <p class="text-xl text-gray-600 leading-relaxed">
        一站式 Markdown 转换平台，轻松将您的文档转换为思维导图、流程图、PPT 演示文稿等多种格式
      </p>
    </section>

    <!-- 工具卡片网格 -->
    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
      <ToolCard
        v-for="tool in tools"
        :key="tool.id"
        :tool="tool"
        @click="navigateToTool(tool.route)"
      />
    </section>

    <!-- 特性介绍 -->
    <section class="bg-white rounded-2xl shadow-xl p-8 mb-16">
      <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">
        为什么选择我们？
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="text-center">
          <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
            <i class="fas fa-rocket text-blue-600 text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold mb-2">快速转换</h3>
          <p class="text-gray-600">秒级完成文档转换，提升工作效率</p>
        </div>
        <div class="text-center">
          <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
            <i class="fas fa-shield-alt text-green-600 text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold mb-2">安全可靠</h3>
          <p class="text-gray-600">本地处理，保护您的数据隐私安全</p>
        </div>
        <div class="text-center">
          <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
            <i class="fas fa-magic text-purple-600 text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold mb-2">多种格式</h3>
          <p class="text-gray-600">支持思维导图、流程图、PPT 等多种输出格式</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ToolCard from '../components/ToolCard.vue'

const router = useRouter()

// 工具数据
const tools = ref([
  {
    id: 'mindmap',
    title: '思维导图',
    description: '将 Markdown 转换为交互式思维导图，支持节点折叠展开',
    icon: 'fas fa-sitemap',
    color: 'bg-blue-500',
    route: '/tools/mindmap',
    features: ['交互式节点', '导出 SVG/PNG', '自动布局']
  },
  {
    id: 'flowchart',
    title: 'Mermaid 流程图',
    description: '使用 Mermaid 语法创建各种类型的图表和流程图',
    icon: 'fas fa-project-diagram',
    color: 'bg-green-500',
    route: '/tools/flowchart',
    features: ['流程图', '序列图', '甘特图']
  },
  {
    id: 'presentation',
    title: 'PPT 演示文稿',
    description: '将 Markdown 转换为精美的 PPT 演示文稿',
    icon: 'fas fa-file-powerpoint',
    color: 'bg-purple-500',
    route: '/tools/presentation',
    features: ['多种主题', '动画效果', '导出 PDF']
  },
  {
    id: 'html',
    title: 'HTML 网页',
    description: '生成美观的 HTML 网页，支持多种样式主题',
    icon: 'fab fa-html5',
    color: 'bg-orange-500',
    route: '/tools/html',
    features: ['响应式设计', '代码高亮', '自定义主题']
  },
  {
    id: 'diagram',
    title: '实例图表',
    description: '创建各种实例图、架构图和关系图',
    icon: 'fas fa-chart-network',
    color: 'bg-pink-500',
    route: '/tools/diagram',
    features: ['多种图表', '自定义样式', '高清导出']
  },
  {
    id: 'dbml',
    title: 'DBML 文档',
    description: '转换为高质量的 DBML 文档，保持格式完整',
    icon: 'fas fa-database',
    color: 'bg-red-500',
    route: '/tools/pdf',
    features: ['高质量输出', '自定义页面', '书签目录']
  },
  {
    id: 'pdf',
    title: 'PDF 文档',
    description: '转换为高质量的 PDF 文档，保持格式完整',
    icon: 'fas fa-file-pdf',
    color: 'bg-red-500',
    route: '/tools/pdf',
    features: ['高质量输出', '自定义页面', '书签目录']
  }
])

// 导航到工具页面
function navigateToTool(route: string) {
  router.push(route)
}
</script> 